<template>
  <div class="manager-detail">  
    <div class="manager-detail__title">{{$dictValue('{name}')}}</div>
    <tx-detail v-loading="loading">
      <tx-block >
        <el-form ref="form" :model="form" :rules="formRules"  :hide-required-asterisk="hideRequiredAsterisk">
          <tx-form-input label-width="80" label="姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:" :entity="form" name="name" :placeholder="$dictValue('请输入{name}姓名')" :action="formConfig.action" />
          <tx-form-input label-width="80" label="单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:" :entity="form" name="workUnit" :placeholder="$dictValue('请输入{name}单位名称')" :action="formConfig.action" :readonly="false"/>
          <tx-form-input label-width="80" label="职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务:" :entity="form" name="job" :placeholder="$dictValue('请输入{name}职务')" :action="formConfig.action" />
          <tx-form-input label-width="80" label="联系电话:" :entity="form" name="phone" :placeholder="$dictValue('请输入{name}11位手机号')" :action="formConfig.action" />
        </el-form>
      </tx-block>
      <div slot="button">
        <tx-button-save name="编辑" @click="handleFormAction('modify')" v-if="formConfig.action=='view'" />
        <tx-button-return name="取消" @click="handleFormAction('view')" :close="false"   v-if="formConfig.action=='modify'" />
        <tx-button-save name="保存" @click="$handleFormValidate('form',handleSave)"  v-if="formConfig.action=='modify'" />
      </div>
    </tx-detail>
  </div>
</template>

<script>

// import DetailEvent from "./DetailEvent.js";
// import PartsModifyMixin from "./mixins/PartsModifyMixin.js";

import dbl from "@/utils/dbl";

let dicts={ 
  "1000000001": {name:"党委管理员", workUnit:"党委领导"},
  "1000000002": {name:"政府管理员", workUnit:"政府领导"}, 
  "1000000010": {name:"救援队伍", workUnit:"救援队伍"},
  "1000000011": {name:"应急物资", workUnit:"应急物资"},
  "1000000012": {name:"防护目标", workUnit:"防护目标"},  
  "1000000013": {name:"专家库", workUnit:"专家库"},
  "1000000014": {name:"避难场所", workUnit:"避难场所"},
}

export default {
  mixins: [ ],
  data() {
    return {
      hideRequiredAsterisk:true,
      loading: false,
      dict: dicts[this.getParameter("menuId")],
      form: {
        name: '',
        workUnit: "",
        job: '',
        phone: '', 
      },
      formOrigin: {
        name: '',
        workUnit: '',
        job: '',
        phone: '', 
      },
      formConfig: {
        action: "view"
      },
      formRules: {
        name: this.$rule.name("姓名", null, 32), 
        workUnit: this.$rule.name("单位", null, 32), 
        job: this.$rule.name("职务", null, 32), 
        phone: this.$rule.mobile("手机号", true ) 
      },
      vehicle: {
        dialog: {
          visible: false,
          title: "biaoti",
          width:"600px"
        },
        tree: [],
        selected: [],
      },
      typeOptions: {
        adapter: (e) => {
          return { label: e.name, value: e.partsTypeId }
        },
        values: []
      }
    };
  },
  components: {
 
  },
  created() { 
  },
  mounted(){      
    this.loadEntity();
  },
  methods: {
    handleSave() { 
      this.loading=true
      let {id, name, workUnit, job, phone}=this.form
      let pack={ }
      if(id){
        pack.body={
          id, name, workUnit, job, phone,
        } 
      }else{
        pack.body={
          name, workUnit, job, phone,
          menuID: this.getParameter("menuId"),
          areaCode: this.$userInfo.areaCode,
          createdBy: this.$userInfo.phone
        } 
      }
      let newMethod=this.$api.AdminController.new
      let updateMethod=this.$api.AdminController.update
      this.$invokeSave(pack, "id", newMethod, updateMethod, (res)=>{
        this.loading=false        
        if(res && res.data){ 
          this.formConfig.action="view"
          this.form.id=res.data
        }
      })
    },
    handleFormAction(action) {
      if(action=="view" && this.formConfig.action!=action){
        Object.assign(this.form, this.formOrigin)
      }
      if(action=="modify" && this.formConfig.action!=action){
        Object.assign(this.formOrigin, this.form)
      }
      this.formConfig.action=action
    },
    handleModify() {
      Object.assign(this.formOrigin, this.form)
      this.formConfig.action="modify"
    },
    loadEntity() {
        let menuId = this.getParameter("menuId");
        if (!menuId) {
            console.log("menuId should not be empty!");
            return;
        }

        const userInfo = this.$store.getters["user/userInfo"] 
        let param = { body: {
          // menuId: menuId,
          menuID: menuId,
          createdBy: userInfo.phone
        } }; 
        
        this.loading = true;
        return this.$api.AdminController.list(param).then((res) => {
            this.loading = false;
            if (res && res.data ) {
              if(res.data.length>0){ 
                let redBody=res.data[0]
                this.form.name=redBody.name
                this.form.job=redBody.job
                this.form.phone=redBody.phone
                this.form.id=redBody.id
                this.form.workUnit = redBody.workUnit
              }else{
                this.handleModify()
              } 
            } else {
                this.$message.error("服务端返回的数据有误") 
            }
        });
    },

  }
}
</script>


<style lang="scss">
@import "../../style/variables.scss";


.main-container .manager-detail .tx-detail{
    padding: 0px 0px; 
}

.manager-detail {

  border: 1px solid rgba(61, 126, 165, 0.5);
  background: linear-gradient(0deg,  #0b3e66 0%,#1c5280 100%);

  .tx-detail { 
    .tx-block{
        padding: 0px;
    }
    .tx-block--content{
        padding: 0px 220px 0px 0px;
        display: flex;
        justify-content: center;
        align-items: center; 
    }
    .detail__buttons{
        padding: 30px 220px 10px 0px !important
    }
  }
  &__title{  
    color: $c-font-table;
    background: linear-gradient(90deg, rgba(23,79,128,0) 0%, rgba(56,119,175,0.4) 50%,rgba(23,79,128,0) 100%);;
    padding: 15px 220px 15px 0px;
    text-align: center;
    font-size: 18px;
  }
  .el-form-item__label{
    width: 50%;
    color: $c-font-table;
  }
  .el-form-item__content{
    width: 50%;
    color: $c-font-table;
  }

  .el-form{
    margin: 30px 0px;
    width: 500px;
  }
  
  .el-input-group__prepend {
    padding: 0px 10px;
  }
  .el-input-group--prepend {
    width: 200px;
  }
  .el-input-group .el-input__inner {
    text-align: right;
  }
  .el-button {
    margin: 0px 10px;
  }
}
</style>
